<template>
    <a-card class="coupon-card">
        <span style="color: #6B6B6B;font-size: 12px;margin-bottom: 10px">可领取优惠券</span>
        <a-row v-if="couponData" v-for="coupon in couponData" style="margin-bottom: 15px">
            <a-col :span="5">
                <div class="coupon-price">
                    <span>￥{{coupon.discountPrice}}</span>
                </div>
            </a-col>
            <a-col :span="13">
                <a-row>
                    <div class="coupon-desc">{{coupon.where===3?'店铺优惠':'商品优惠'}}
                        {{coupon.what===1?'满￥'+coupon.min+'减￥'+coupon.discountPrice:'立减￥'+coupon.discountPrice}}
                        <a style="float: right;color: #E4393C">去凑单 ></a>
                    </div>
                </a-row>
                <a-row>
                    <a-tooltip placement="bottomRight" :mouseEnterDelay=1 :overlayStyle="{fontSize:'13px'}">
                        <template slot="title">
                            仅可购买{{coupon.where===3?shopName:shopName+'指定'}}商品
                        </template>
                        <div class="coupon-desc-bottom">
                            仅可购买{{coupon.where===3?shopName.length>8?shopName.substr(0,8)+'...':shopName+'商品'
                            :shopName.length>8?shopName.substr(0,8)+'...':shopName+'指定商品'}}
                        </div>
                    </a-tooltip>
                </a-row>
            </a-col>

            <a-col :span="1"></a-col>
            <a-col :span="5">
                <a-button type="danger" v-if="coupon.can===true" @click="takeCoupon(coupon.id)">领取</a-button>
                <a-button type="link" disabled v-if="coupon.can===false">{{coupon.stock<=0?'全部被领完啦':'已领取'}}
                </a-button>
            </a-col>
        </a-row>
    </a-card>
</template>

<script>
    import couponApi from "../../../api/info/couponApi";

    export default {
        props: {
            couponData: Array,
            shopName: String
        },
        inject: ["reload"],
        name: "CouponCard",
        methods: {
            takeCoupon(couponId) {
                couponApi.take(couponId).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.reload()
                    }
                })
            },
        }
    }
</script>

<style scoped>
    /*优惠卡片*/
    .coupon-card {
        width: 420px;
        height: auto;
        margin: -1px 0 0;
        padding: 0px;
        box-shadow: 0 0 2px 2px #eee;
        border: 1px solid #E4393C;
        background: none repeat scroll 0 0 #fff;
        text-align: left;
        box-sizing: content-box;
    }

    .coupon-price {
        border: 1px solid #F9D2D3;
        color: #E2231A;
        font-weight: 700;
        padding: 5px 10px;
        width: 80%;
        text-align: center;
    }

    .coupon-desc {
        font-weight: 400;
        font-size: 12px;
        color: #333;
    }

    .coupon-desc-bottom {
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        float: left;
        width: 190px;

        font-size: 12px;
        color: #9C9C9C;
    }
</style>